<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>百卓移动端H5管理后台</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">
    <style>
        .layui-table-cell {
            height: auto !important;
        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{index::#header}"></div>
    <div th:replace="~{index::#menu}"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <table class="layui-table" id="user_list" lay-filter="users"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="h_pic">
    <img src="{{ d.headPic }}" width="50" height="50" style='cursor: pointer'/>
</script>
<script th:src="@{layui/layui.all.js}"></script>
<script>

    layui.use('table', function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        remember_user = JSON.parse(sessionStorage.getItem("remember_user"))
        if (!remember_user) {
            window.location.href = 'login.html'
        }
        $('#head_pic').attr("src", remember_user.headPic)
        $('#username').html(remember_user.name)
        $('#layout').click(function () {
            layer.confirm('是否退出当前用户？', {
                btn: ['退出', '取消'], //按钮
                title: "提示"
            }, function () {
                sessionStorage.removeItem("remember_user")
                window.location.href = 'login'
            });
        })
        // table.set({headers: {Authorization:"Bearer "+ remember_user.token}})
        $.ajaxSetup({
            headers: {
                Authorization: "Bearer " + remember_user.token
            }
        });
        //第一个实例
        table.render({
            elem: '#user_list'
            , url: '/api/user/list' //数据接口
            , page: true //开启分页
            , response: {
                statusName: 'code', //规定返回的状态码字段为code
                statusCode: 200 //规定成功的状态码味200
            }
            , cols: [
                [ //表头
                    {field: 'id', title: '序号'}
                    , {field: 'name', title: '用户名'}
                    , {field: 'headPic', title: '头像', templet: '#h_pic', event: "preview"}
                    , {field: 'lastLoginTime', title: '最后一次登录时间'}
                    , {field: 'createdAt', title: '创建时间'}
                    , {title: '操作', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]
            ]
        });

        table.on('tool(users)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (obj.event === 'preview') {
                if (data.headPic) {
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['auto'],
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: '<img src="' + data.headPic + '" width="300" height="300"/>'
                    });
                }
            }
            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除用户吗', function (index) {
                    $.ajax({
                        type: "delete",
                        url: "/api/user/delete",
                        dataType: "json",
                        data: JSON.stringify({id: parseInt(obj.data.id)}),
                        contentType: "application/json",
                        success: function (rs) {
                            if (rs.code != 200) {
                                layer.msg(rs.message, {icon: 5});
                                return false;
                            } else {
                                layer.msg(rs.message, {icon: 6});
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                //向服务端发送删除指令
                            }
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                window.location.href = 'userEdit/' + obj.data.id
                //同步更新缓存对应的值
                // obj.update({
                //     username: '123'
                //     ,title: 'xxx'
                // });
            }
        });
    });
</script>
</body>

</html>